import type { ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import useProTableConfig from '../../hooks/useProTableConfig';
import styles from './index.less';
// import type { FileRuleOTD } from '@/services/types/rulesCenter/modelManagement';
import Priview from '@/components/Priview';
import JsonPriview from '@/components/Priview/json';
import { FileAddFilled } from '@ant-design/icons';
import { Button, message, Popconfirm, Space } from 'antd';
import { useEffect } from 'react';
import { useModel } from 'umi';
import hooks from '../../hooks';
import CorpusDawer from '../CorpusDawer';
import CreateKnowledge from '../CreateKnowledge';
import ExportFile from '../ExportFile';
const CorpusFile = () => {
  const {
    formRef,

    getCorpusFile,
    setKeyWord,
    deleteCorpusFileContent,
    corpusDrawerDetailToggle,
    setFileId,
    selectedRowKeys,
    setSelectedRowKeys,
    setSelectedRows,
    setExportFileVisible,
  } = hooks.useContainer();
  const proTableConfig = useProTableConfig({
    optionRender(config, props, dom) {
      return [...dom.reverse()];
    },
  });

  const { actionRef } = useModel('useTree', (model) => {
    return {
      actionRef: model.actionRef,
    };
  });

  const { setJsonViewVisible, setViewVisible, setUrl, setType } = useModel('useTree', (model) => {
    return {
      setJsonViewVisible: model.setJsonViewVisible,
      setViewVisible: model.setViewVisible,
      setUrl: model.setUrl,
      setType: model.setType,
    };
  });
  useEffect(() => {
    return () => {
      setKeyWord('');
    };
  }, []);

  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
      title: '序号',
    },
    {
      title: '文件名称',
      dataIndex: 'fileName',
      ellipsis: true,
    },
    {
      title: '文件类型',

      dataIndex: 'suffix',
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      ellipsis: true,

      valueType: 'dateTimeRange',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },

    {
      title: '操作',
      width: 185,
      dataIndex: 'operate',
      hideInSearch: true,
      renderText: (text, record) => {
        return (
          <Space size="small" className={styles.spaceWrap}>
            <a
              onClick={() => {
                setUrl(record?.fileId);
                setType(record?.suffix === 'doc' ? 'docx' : record?.suffix);
                if (record?.suffix?.indexOf('json') > -1 || record?.suffix === 'txt') {
                  setJsonViewVisible(true);
                } else if (
                  record?.suffix === 'docx' ||
                  record?.suffix === 'pdf' ||
                  record?.suffix === 'doc'
                ) {
                  setViewVisible(true);
                } else {
                  message.warning('暂不支持预览');
                }
              }}
            >
              预览
            </a>
            <a
              onClick={() => {
                window.open(
                  `${window.location.origin}/corpus/common/downloadFile?fileId=${record?.fileId}`,
                );
              }}
            >
              下载
            </a>

            <Popconfirm
              key="delete"
              title="确认是否删除？"
              onConfirm={() => {
                deleteCorpusFileContent.run(record?.id);
              }}
            >
              <a style={{ color: '#f02323' }}>删除</a>
            </Popconfirm>

            <a
              onClick={() => {
                setFileId(record.id);
                corpusDrawerDetailToggle();
              }}
            >
              详情
            </a>
          </Space>
        );
      },
    },
  ];
  return (
    <PageContainer header={{ title: '' }}>
      <ProTable
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        request={getCorpusFile.runAsync}
        size="middle"
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        rowSelection={{
          defaultSelectedRowKeys: [],
          selectedRowKeys: selectedRowKeys,
          onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
            console.log(selectedRowKeys);

            setSelectedRowKeys(selectedRowKeys);
            setSelectedRows(selectedRows);
          },
        }}
        toolBarRender={() => [
          // <Button
          //   key="create"
          //   icon={<FileAddFilled />}
          //   type="primary"
          //   onClick={() => {
          //     if (selectedRowKeys.length === 0) {
          //       message.error('请选择文件！');
          //       return;
          //     }
          //     setCreateKnowledgeVisible(true);
          //   }}
          // >
          //   {`生成知识库`}
          // </Button>,

          <Button
            key="create"
            icon={<FileAddFilled />}
            type="primary"
            onClick={() => {
              setExportFileVisible(true);
            }}
          >
            {`上传语料`}
          </Button>,
          <Button
            key="goback"
            onClick={() => {
              history.go(-1);
            }}
          >
            返回
          </Button>,
        ]}
        pagination={{
          showSizeChanger: true,
          defaultPageSize: 10,
        }}
      />
      <Priview />
      <JsonPriview />
      <CorpusDawer />
      <CreateKnowledge />
      <ExportFile />
    </PageContainer>
  );
};

export default () => {
  return (
    <hooks.Provider>
      <CorpusFile />
    </hooks.Provider>
  );
};
